NaN

辅助工具

  1. 在线匹配 https://c.runoob.com/front-end/854/
  2. 百度前端助手

(一)创建正则表达式对象

  1. 字面量方式
  2. new 关键字
  3. 字符串全局替换
<script>
    // 1 字面量方式创建正则表达式 
    var reg = /web/;  // 此正则的意思是:只要字符串含有web就满足条件
    var str = 'asdfasdfas23423lwebsadfasdfas';
    // 使用test方法检查字符串是否满足正则表达式的规则
    console.log('reg',reg.test(str));  // 满足条件就返回true,否则就返回false

    // 2 正则表达式参数 i-不区分大小写 g-全部 m-多行
    var reg2 = /web/i;  
    var str2 = 'aaWeBaaa';
    console.log('reg2',reg2.test(str2));

    

    // 4 使用构造函数创建正则表达式对象
    var reg4 = new RegExp('web','i');
    var str4 = '222web2222222web222';
    console.log('reg4',reg4.test(str4));  // true 
</script>

(二)常用匹配规则

(1) 元字符

  1. 任意字符 .
  2. \w 字母、数字、下划线
  3. \s 任意空白字符
  4. \d 匹配数字，等同于[0-9]
  5. \D 匹配非数字，等同于[^0-9]
  6. | 或匹配，如 /x|y/ 正则可匹配 x 或 y 两个字符
  7. ^ 匹配字符串的开始
  8. $ 匹配字符串的结束
  9. [abc] 表示 包含里面的任意一个
<script>
    // 1. .匹配任意字符
    var reg1 = /./;
    var str = 'asdfasdf';
    reg1.test(str); // true

    // 2. \w匹配字母,数字,下划线
    var reg2 = /\w\w\w/;
    var str2 = 'asdf';  
    reg2.test(str2); // true

    // 3. \s 任意空白字符
    var reg3 = /ab\sab/;
    var str3 = 'ab  ab'; 
    reg3.test(str3);  // false ab与ab之间只能有一个空格

    // 4. \d 匹配数字
    var reg4 = /\d\d/;
    var str = '1234';  
    reg4.test(str);  // true

    // 5. \D 匹配非数字
    var reg5 = /^\D$/;
    var str5 = '23423a234234'; 
    reg5.test(str5); // true 

    // 6. | 或者
    var reg6 = /13|18/;
    var str6 = '1388888';
    reg6.test(str6);
    var str6 = '18234234'
    reg6.test(str6);

    var reg6 = /abc|xyz/;
    var str6 = 'asdfasdabcasdf';
    reg6.test(str6);

    // 7. ^匹配开始
    var reg7 = /^web/;
    var str7 = 'asdfasdfwebasdfasdf';
    var str7_2 = 'webasdfasdf';
    reg7.test(str7);  // false
    reg7.test(str7_2); // true

    // 8. $匹配结尾 
     var reg8 = /^j\w\dt$/;
    var str8 = 'ja4t'; 
    reg8.test(str8);  // true 

    // 9. [abc] 只要包含abc任意一个字符都能匹配
    var reg9 = /[abc]/;
    var str9 = '2322alll';
    reg9.test(str9);

    // 10. [^x] 只要有一个不是x的字符都能匹配
    var reg10 = /[^x]/;
    var str10 = 'asdf';
    reg10.test(str10);

    // 11. [^abc] 只要有一个不是a,b,c的字符都能匹配
    var reg11 = /[^abc]/;
    var str11 = 'asdf';
    reg11.test(str11);
</script>

(2) 反义字符

  1. [^x] 匹配除“x”之外的所有字符，其中“x”可以为任意字符
  2. [^xyz] 同上，匹配除“x、y、z”之外的任意字符

(三)重复匹配

  1. ？ 重复出现零次或一次
  2. + 重复出现一次或多次
  3. * 重复出现零次或多次
  4. {n} 重复出现 n 次
  5. {n,} 至少重复出现 n 次
  6. {m,n} 重复重现 m 到 n 次，其中，m<n
// 1. .匹配任意字符
var reg1 = /./;
var str = 'asdfasdf';
reg1.test(str); // true

// 2. \w匹配字母,数字,下划线
var reg2 = /\w\w\w/;
var str2 = 'asdf';  
reg2.test(str2); // true

// 3. \s 任意空白字符
var reg3 = /ab\sab/;
var str3 = 'ab  ab'; 
reg3.test(str3);  // false ab与ab之间只能有一个空格

// 4. \d 匹配数字
var reg4 = /\d\d/;
var str = '1234';  
reg4.test(str);  // true

// 5. \D 匹配非数字
var reg5 = /^\D$/;
var str5 = '23423a234234'; 
reg5.test(str5); // true 

// 6. | 或者
var reg6 = /13|18/;
var str6 = '1388888';
reg6.test(str6);
var str6 = '18234234'
reg6.test(str6);

var reg6 = /abc|xyz/;
var str6 = 'asdfasdabcasdf';
reg6.test(str6);

// 7. ^匹配开始
var reg7 = /^web/;
var str7 = 'asdfasdfwebasdfasdf';
var str7_2 = 'webasdfasdf';
reg7.test(str7);  // false
reg7.test(str7_2); // true

// 8. $匹配结尾 
    var reg8 = /^j\w\dt$/;
var str8 = 'ja4t'; 
reg8.test(str8);  // true 

// 9. [abc] 只要包含abc任意一个字符都能匹配
var reg9 = /[abc]/;
var str9 = '2322alll';
reg9.test(str9);

// 10. [^x] 只要有一个不是x的字符都能匹配
var reg10 = /[^x]/;
var str10 = 'asdf';
reg10.test(str10);

// 11. [^abc] 只要有一个不是a,b,c的字符都能匹配
var reg11 = /[^abc]/;
var str11 = 'asdf';
reg11.test(str11);


/****** 重复 ********/
// 1. ?匹配0次或1次
var reg1 = /^https?:\/\//;
var str1 = 'http://asdfasdf';
var str1_2 = 'https://asdfasdf';
reg1.test(str1);  // true
reg1.test(str1_2); // true

// 2. +匹配一次或多次
var reg2 = /a+/;
var str = 'dfsdfsdfaasdafsaaaf';
reg2.test(str);

// 3. *匹配0次到多次
var reg3 = /^https?:\/\/.*/;
var str = 'http://asdfasdf';

// 4.{n} 重复n次
var reg4 = /^1\d{10}$/;
var str4 = '13800000000';
reg4.test(str4); 

// 5. {n,}
// 6. {m,n}

(三) 正则表达式应用 

// 1.字符串替换
var str3 = 'web前端22222222222web前端333333333333web前端';
var newStr3 = str3.replace(/web前端/g,'java');
console.log('newStr3',newStr3);

// 2.查找符合正则的条件的内容,举例:把网页中所有的图片的找出来
document.body.innerHTML.match(/https:.*?.(png|jpeg|jpg)/gi)

// 3. 网站正则验证

(四) 分组

  1. 用括号分组
  2. 分组的应用
<script>
    // 1.括号表示一个整体
    var reg = /^(0|86|17951)?1\d{10}/;
    var str = '8613811111111';
    reg.test(str);

    // 2. 分组
    var reg2 = /(a{3})(b{4})-\1\2/;
    var str2 = 'aaabbbb-aaabbbb';
    reg2.test(str2);

    // 3.字符串替换分组
    // var reg3 = /(\d{3})(\d{4})(\d{4})/;
    var str3 = '15013795530';
    str3.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
</script>

五、贪婪匹配和惰性匹配

  1. 字符串的match方法，可以检查匹配了几次
var str = 'a3abbba4a';
var res = str.match(/a\da/g);
console.log(res); // ['a3a','a4a']
  1. 贪婪匹配，尽可能多的匹配(默认贪婪匹配)
 var str = '<img src="http://static.huruqing.cn/fresh/banner1.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner2.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner3.jpeg" />';
    var res = str.match(/http.*jpeg/g);
    console.log(res);
  1. 懒惰匹配，尽可能少的匹配, 在重复的后面加?即可
<script>
    var str = '<img src="http://static.huruqing.cn/fresh/banner1.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner2.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner3.jpeg" />';
    var res = str.match(/http.*?jpeg/g);
    console.log(res);
</script>

正则表达式解读

  1. /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
1. ^(0|86|17951)? 括号内容0次到1次
2. (13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]) 手机号码前三位
3. [0-9]{8}$  后8位
  1. /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
1. \w+ 数字,字母,下划线一次或多次
2. ([-+.]\w+)* 
  - 括号内的东西0次或多次
	- -+.任意一个
  - 数字,字母,下划线一次或多次
3. @\w+ 同上
4. ([-.]\w+)* 类似第2点
5. \.\w+  . 同上
6. ([-.]\w+)* 同上
  1. /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
      1. ^https?😕/ http:// 或者https://
    2. (([a-zA-Z0-9_-])+(.)?)*
    3. ([a-zA-Z0-9_-])+ 字母,数字,下划线,- 一个或多个
    4. (.)? .一次或0次
    5. (:\d+)?
    6. (/((.)?(?)?=?&?a-zA-Z0-9_-?))$

作业

  1. 判断以下正则的值, 并自行验证
// 说出正则表达式的含义,写出下面匹配的结果
/*************** 一元字符 ****************/
var reg = /b..k/;
var str = "books";
var str2 = "boooks";
reg.test(str);   
reg.test(str2);

// 
var reg = /t\wq/;
var str1 = "2222t2qkkk";
var str2 = "aaaaat$qbbbbb";
reg.test(str1);
reg.test(str2);

var reg = /\Dook/;
var str = "8ook";
reg.test(str);

var reg = /java\sscript/;
var str = "study java script";
reg.test(str);

var reg = /javascript|html|css/;
var str = "study javascript";
reg.test(str);

/*********** 匹配开始和结束 *************/
var reg = /^huruqing/;
var str = "huruqing123456";
reg.test(str);

var reg = /^huruqing$/;
var str = "huruqing123456";
reg.test(str);

/*********** 重复 *************/
var reg = /bo?k/;
var str = "book";
reg.test(str);

var reg = /bo*k/;
var str = "boook";
reg.test(str);

//+ 前面子表达式出现1次或多次
var reg = /bo+k/;
var str = "boook";
reg.test(str);

//{m,n}最少出现m次,最多出现n次
var reg = /bo{2,4}k/;
var str = "boooook";
reg.test(str);

//{m,}最少出现m次
var reg = /bo{2,}k/;
var str = "boooook";
reg.test(str);

//{m}正好出现m次
var reg = /bo{2}k/;
var str = "boook";
reg.test(str);
/****************** 反义 ****************/
var reg = /o[^usb]t/;
var str = "oat";
reg.test(str);

var reg = /[a-zA-Z0-9]ook/;
var str = "8ook";
reg.test(str);
  1. 编写一个用户名的正则，要求：
    • 大写字母开头
    • 其它字符可以是数字，字母，下划线
    • 8到20个字符
  2. 给登录页面的手机号码添加验证